<template>
  <div class="warp">
    <div class="warp_auto">
      <div class="warp_top">
        <!--模板（条件）-->
        <span  class="span_statr">
          <div class="jiansuo-box five">
            <span class="span_statr2">模板类型 : </span>
            <el-select
              v-model="templateType"
              placeholder="请选择类型"
              clearable
              class="zhuan2"
            >
              <el-option
                v-for="item in arrTypelist"
                :key="item.id"
                :label="item.dict_template_name"
                :value="item.id"
              />
            </el-select>
          </div>
            <div class="jiansuo-box three">
            <span class="span_top">模板名称 : </span>
            <el-input
              v-model="templateName"
              class="bed"
              placeholder="请输入模板名称"
            />
          </div>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="btn_"
            @click="btn"
          >检索</el-button>
        </span>
      </div>

      <!--模板（表格）-->
      <div>
        <el-table
          :data="listArr_"
          style="width: 100%"
          height="400"
          stripe
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column
            type="index"
            width="90"
            label="序号"
            align="center"
          />
          <el-table-column label="类型" min-width="15%" align="center">
            <template slot-scope="scope">
             <span style="margin-left: 10px"  v-for="typeItem in arrTypeAllList" v-if="typeItem.id == scope.row.template_id">{{
                 typeItem.dict_template_name
               }}</span>
            </template>
          </el-table-column>
          <el-table-column label="模板名称" min-width="20%" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                  scope.row.template_item_name
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="模板内容" min-width="15%" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                  scope.row.content
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="18%">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)"
              >选择</el-button>
            </template>
          </el-table-column>
        </el-table>
         <!-- 分页 -->
        <div>
          <el-pagination
            :current-page="start"
            :page-size="PageSize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'

import {
  queryList,
  getListlei, getUser
} from '@/api/table'
export default {
  props: {
    rowIndex:Number,
    required: true
  },
  data() {
    return {
      dialogUpdatalei: false, // 开关-类型
      dialogUpdata: false, // 开关-模板
      leiswitchId: '',
      leiswitchStatus: '',
      switchId: '',
      switchStatus: '',
      dialogFormVisiblelei: false,
      typeName:'',
      typeStatus:'',
      valuelei: '',
      radio1: 0,
      // 控制弹窗 显示
      dialogVisiblessss: false,
      dialogVisibless: false,
      dialogInfoss: {},
      // 点击查看按钮  这条数据详细信息
      dialogInfo: {},
      listarr: null,
      listLoading: true,
      loading: false,
      templateName: '',
      templateStatus:'',
      templateType:'',
      dialogFormVisible: false,
      del: false,

      ruleForm: {
        templateId: '',
        templateItemName: '',
        spell: '',
        content: '',
        status: '',
        sortNum: ''
      },
      leixFrom: {
        dicTemplateName: '',
        status: '',
        sortNum: ''
      },
      options: [
        {
          id: '1',
          value: '1',
          label: '启用'
        },
        {
          id: '0',
          value: '0',
          label: '禁用'
        }
      ],
      value: '',
      arr: [],
      arrlist: [],
      arrTypelist:[],
      arrTypeAllList:[],
      selectType:'',
      listArr_: [],
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意 : 这里不能为空)
      totalCounts:0,
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      dialogVisible: false, // 控制弹窗 显示
      operatorCode:"",
      // 点击查看按钮  这条数据详细信息
    }
  },
  created() {
    this.lastTime = new Date().getTime()
    // 类型
  },
  mounted() {
    getUser().then((res) => {
      this.operatorCode = res.data.workNumber;
      this.queryTemplateList(this.PageSize, this.start);
      this.selectTypeList();
      this.selectAllTypeList();
    });
  },
  methods: {
    //模板检索
    queryTemplateList(pageSize, start) {
      getListlei({
        size: pageSize,
        start: start,
        templateItemName: this.templateName,
        templateId: this.templateType==''? null  : this.templateType,
        status: 1,
        operatorCode:this.operatorCode
      }).then((res) => {
        this.listArr_ = res.data
        this.totalCount = res.totalCount
      })
    },
    //所有的类型
    selectAllTypeList() {
      queryList({
      }).then((res) => {
        this.arrTypeAllList = res.data;
      })
    },
    //所有的类型
    selectTypeList() {
      queryList({
        status: 1
      }).then((res) => {
        this.arrTypelist = res.data;
      })

    },
    //下拉框获取选中的汉字
    selectTppe(id){
        let selectObj = {};
        selectObj  = this.arrTypelist.find((item)=>{
          return item.id === id;
        });
        this.selectType=selectObj.dict_template_name;
    },
    // 搜索按钮
    btn() {
      this.start=1;
      this.queryTemplateList(this.PageSize,this.start)
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.PageSize = val;
      this.queryTemplateList(this.PageSize, this.start); // 模板
      this.start = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      this.start = val
      this.queryTemplateList(this.PageSize, this.start) // 模板
    },
    //选择
    handleEdit(info) {
       var item = new Object();
       item.rowIndex = this.rowIndex;
       item.val = info.content;
       eventBus.$emit('selectTemplateValue', item);
    }
  }
}
</script>

<style lang="scss" scoped>
.warp {
  width: 100%;
  height: 100%;

  .warp_auto {
    width: 97%;
    height: 600px;
    margin: 0 auto;

    .warp_top {
      width: 100%;
      height: auto;

      .jiansuo-box {
        display: inline-block;
        height: 77px;
        padding-top: 14px;
        box-sizing: border-box;
      }
      .list-div{
        height: 60%;
      }
      .three {
        width: 30%;
      }
      .five {
        width: 30%;
      }
      .span_top {
        position: relative;
        left: 18px;
        font-size: 15px;
        line-height: 50px;
      }
      .span_statr {
        position: relative;
        left: 10px;
        font-size: 15px;
        line-height: 50px;
      }
      .span_statr1 {
        position: relative;
        left: 50px;
        font-size: 15px;
        line-height: 50px;
      }
      .span_statr2 {
        position: relative;
        left: 50px;
        font-size: 15px;
        line-height: 50px;
      }
      .bed {
        width: 200px;
        position: relative;
        left: 10px;
      }
      .zhuan {
        position: relative;
        left: 30px;
      }
      .zhuan1 {
        position: relative;
        left: 50px;
        width: 12%;
      }
      .zhuan2 {
        position: relative;
        left: 3%;
        width: 13%;
      }
      .btn_ {
        position: relative;
        left: 181px;
      }
    }
    .content {
      border: 1px solid #dcdfe6;
    }
    .department {
      position: relative;
    }
    .paging {
      float: right;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .adda {
      width: auto;
      height: 51px;
    }

    //表单中的状态
    .tablescope {
      ::v-deep .el-switch__label--left {
        position: relative;
        left: 59px;
        color: #fff;
        z-index: -1111;
      }

      ::v-deep .el-switch__core {
        width: 58px !important;
      }

      ::v-deep .el-switch__label--right {
        position: relative;
        right: 59px;
        color: #fff;
        z-index: -1111;
      }

      ::v-deep .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
      }

      ::v-deep .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
      }
    }


    .mod_box {
      margin-left: 28%;
      width: 44%;
    }
    .mod_box1 {
      margin-left: 28%;
      width: 44%;
    }
    .role-mask {
      border-radius: 6px;
    }
    .role-mask .el-dialog__header {
      border-bottom: 1px solid #e8eaec;
    }

    .role-mask .el-dialog__body {
      padding: 16px 16px 0px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
    }

    .role-mask .el-dialog__footer {
      border-top: 1px solid #e8eaec;
    }

    .el-inputer {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 88%;
    }
    .el-inputer1 {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 50%;
    }
  }
}
@media screen and (min-width: 1200px) and (max-width:1365px) {
  .warp {
    width: 100%;
    height: 100%;

    .warp_auto {
      width: 96%;
      height: 600px;
      margin: 0 auto;

      .warp_top {
        width: 100%;
        height: auto;
        .list-div{
          height: 60%;
        }
        .jiansuo-box {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }
        .three {
          width: 30%;
        }
        .five {
          width: 30%;
        }

        .span_statr {
          position: relative;
          left: 0%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr1 {
          position: relative;
          left: 2%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr2 {
          position: relative;
          left: 3%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_top {
          position: relative;
          left: 18px;
          font-size: 15px;
          line-height: 50px;
        }

        .bed {
          width: 52%;
          position: relative;
          left: 8%;
        }

        .zhuan {
          position: relative;
          left: 2%;
          width: 57%;
        }

        .zhuan1 {
          position: relative;
          left: 16px;
          width: 13%;
        }

        .zhuan2 {
          position: relative;
          left: 3%;
          width: 61%;
        }

        .btn_ {
          position: relative;
          left: 2%;
        }

        .btn_1 {
          position: relative;
          left: 15%;
        }
      }

      .mod_box {
        margin-left: 20%;
        width: 66%;
      }

      .el-inputer {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 89%;
      }
      .el-inputer1 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 48%;
      }
    }
  }
  .mod_box1 {
    margin-left: 20%;
    width: 66%;
  }
}

@media screen and (min-width: 1366px) and (max-width:1600px) {
  .warp {
    width: 100%;
    height: 100%;

    .warp_auto {
      width: 97%;
      height: 600px;
      margin: 0 auto;

      .warp_top {
        width: 100%;
        height: auto;
        .list-div{
          height: 60%;
        }
        .jiansuo-box {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }
        .three {
          width: 30%;
        }
        .five {
          width: 20%;
        }

        .span_statr {
          position: relative;
          left: 0%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr1 {
          position: relative;
          left: 2%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr2 {
          position: relative;
          left: 3%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_top {
          position: relative;
          left: 18px;
          font-size: 15px;
          line-height: 50px;
        }

        .bed {
          width: 57%;
          position: relative;
          left: 6%;
        }

        .zhuan {
          position: relative;
          left: 2%;
          width: 57%;
        }

        .zhuan1 {
          position: relative;
          left: 16px;
          width: 13%;
        }

        .zhuan2 {
          position: relative;
          left: 3%;
          width: 61%;
        }

        .btn_ {
          position: relative;
          left: 4%;
        }


        .btn_1 {
          position: relative;
          left: 18%;
        }
      }

      .mod_box {
        margin-left: 20%;
        width: 60%;
      }

      .el-inputer {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 90%;
      }
      .el-inputer1 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 45%;
      }
    }
  }
  .mod_box1 {
    margin-left: 20%;
    width: 60%;
  }
}

@media screen and (min-width: 1800px) {
  .warp {
    width: 100%;
    height: 100%;

    .warp_auto {
      width: 97%;
      height: 600px;
      margin: 0 auto;

      .warp_top {
        width: 100%;
        height: auto;
        .list-div{
          height: 60%;
        }
        .jiansuo-box {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }
        .three {
          width: 30%;
        }
        .five {
          width: 30%;
        }
        .span_statr {
          position: relative;
          left: 0%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr1 {
          position: relative;
          left: 2%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr2 {
          position: relative;
          left: 3%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_top {
          position: relative;
          left: 18px;
          font-size: 15px;
          line-height: 50px;
        }

        .bed {
          width: 54%;
          position: relative;
          left: 6%;
        }

        .zhuan {
          position: relative;
          left: 2%;
          width: 54%;
        }

        .zhuan1 {
          position: relative;
          left: 3%;
          width: 12%;
        }

        .zhuan2 {
          position: relative;
          left: 3%;
          width: 54%;
        }

        .btn_ {
          position: relative;
          left: 10%;
        }
        .btn_1 {
          position: relative;
          left: 27%;
        }
      }

      .mod_box {
        margin-left: 28%;
        width: 44%;
      }

      .el-inputer {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 90%;
      }
      .el-inputer1 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 50%;
      }
    }
  }
  .mod_box1 {
    margin-left: 28%;
    width: 44%;
  }
}
</style>
